<template>
  <view class="main" v-if="detail.pics">
    <!-- 轮播图 -->
    <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item,index) in detail.pics" :key="item.pics_id">
        <view class="swiper-item">
          <image @click="showBig(index)" class="img" :src="item.pics_big" mode="widthFix"></image>
        </view>
      </swiper-item>

    </swiper>
    <!-- 商品基本信息 -->
    <!-- 商品信息 -->
    <view>{{num}}</view>
    <view>total:{{total}}</view>
    <button @click="setNumEvent">修改num</button>
    <view class="message">
      <view class="price">
        ￥{{detail.goods_price}}
      </view>
      <view class="info">
        <view class="left">
          {{detail.goods_name}}
        </view>
        <view class="right">
          <uni-icons type="star" size="22"></uni-icons>
          收藏
        </view>
      </view>
      <view class="pass">
        快递：免运费
      </view>
    </view>
    <!-- 富文本详情信息 -->
    <rich-text :nodes="detail.goods_introduce"></rich-text>
    <!-- 底部购物条 -->
    <!-- :buttonGroup="buttonGroup" -->
    <view class="bottom">
      <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @buttonClick="buttonClick"
        @click="bottomClick" />
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapGetters
  } from 'vuex'
  export default {
    computed: {
      ...mapState('cart', ['num']),
      ...mapGetters('cart', ['total'])
    },
    data() {
      return {
        goods_id: '',
        detail: {},
        options: [{
            text: '店铺',
            icon: 'shop'
          },
          {
            text: '购物车',
            icon: 'cart',
            info: 0
          }
        ],
        buttonGroup: [{
            text: '加入购物车',
            backgroundColor: "#ff0000",
            color: '#ffffff'
          },
          {
            text: '立即购买',
            backgroundColor: "#ffa200",
            color: '#ffffff'
          }
        ]
      };
    },
    onLoad({
      goods_id
    }) {
      this.goods_id = goods_id
      this.getData()
    },
    /*
      watch:侦听器
        data(){
          return {
            obj:{
              num:1
            }
          }
        },
        watch:{
          "obj.num":{
            handler(newVal,oldVal){
              newVal:当前值,
              oldVal:修改前的值
            },
            deep:是否深度侦听
            immediate:是否定义时就立马执行一次回调            
          }
        } 
    */
    watch: {
      "total": {
        handler(newVal) {
          this.options[1].info = newVal
        },
        immediate: true
      }
    },
    methods: {
      setNumEvent() {
        this.$store.commit('cart/setNum', this.num + 1)
      },
      // 获取商品详情
      async getData() {
        const res = await uni.http.get('/goods/detail?goods_id=' + this.goods_id)
        res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, "<img style='display:block;' ")
        res.message.goods_introduce = res.message.goods_introduce.replace(/.webp/g, ".jpg")
        this.detail = res.message
        console.log('商品详情', res);
      },
      // 点击事件
      bottomClick(e) {
        console.log(e);
        if (e.index === 1) {
          uni.switchTab({
            url: "/pages/cart/cart"
          })
        }
      },
      buttonClick({
        index
      }) {
        console.log(index);
        if (index === 0) {
          // 商品添加到购物车(vuex)          
          this.$store.commit('cart/setCartList', {
            ...this.detail,
            goods_count: 1,
            goods_status: true
          })
          // uni.switchTab({
          //   url: "/pages/cart/cart"
          // })
        }
      },
      // 图片预览
      showBig(index) {
        uni.previewImage({
          current: index,
          urls: this.detail.pics.map(item => {
            return item.pics_big
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .swiper {
    height: 750rpx;

    .img {
      width: 100%;
    }
  }

  .message {
    padding: 0 20rpx;

    .price {
      font-size: 20px;
      color: #c00000;
      padding: 40rpx 0;
    }

    .info {
      font-size: 14px;
      display: flex;

      .left {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
        -webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
        -webkit-line-clamp: 2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。此处为2行
        word-wrap: break-word; //允许单词内断句，首先会尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句
      }

      .right {
        width: 160rpx;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-left: 1px solid #eeece9;
      }
    }

    .pass {
      font-size: 12px;
      color: #878787;
      padding: 40rpx 0;
    }
  }

  .bottom {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
  }

  .main {
    padding-bottom: 120rpx;
  }
</style>